<template>
	<view class="content">
		<view class="mask-item">
			<view class="item-banner">
				<view class="item-banner-line"></view>
				<view class="item-banner-text">合作品牌</view>
			</view>
			<view class="mask-list-item-image">
				<view class="mask-item-image">
					<image src="../../static/images/common/Mask group.png"></image>
				</view>
				<view class="mask-item-image">
					<image src="../../static/images/common/Mask group.png"></image>
				</view>
				<view class="mask-item-image">
					<image src="../../static/images/common/Mask group.png"></image>
				</view>
			</view>
		</view>
		<view class="project-item">
			<view class="item-banner">
				<view class="item-banner-line"></view>
				<view class="item-banner-text">楼盘套餐</view>
			</view>
			<view class="project-list-items">
				<view class="project-list-item" v-for="(item,index) in msgs" :key="index">
					<image class="project-list-item-image" :src="item.tSrc"></image>
					<view class="project-list-item-box">
						<view class="project-list-item-title alignment">{{item.title}}</view><br>
						<view class="project-list-item-houseType alignment">{{item.houseType}}</view>
						<view class="project-list-item-currencyType alignment">{{item.currencyType}}</view>
						<view class="project-list-item-price alignment">{{item.price}}</view><br>
						<view class="project-list-item-theContent alignment">{{item.theContent}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-banner">
			<view class="footer-banner-item">
				<image src="../../static/images/home_select.png" class="footer-banner-item-image"></image>
				<text class="footer-banner-item-text">首页</text>
			</view>
			<view class="footer-banner-item">
				<image src="../../static/images/time_unselect.png" class="footer-banner-item-image"></image>
				<text class="footer-banner-item-text">预约</text>
			</view>
			<view class="footer-banner-item">
				<image src="../../static/images/me_unselect.png" class="footer-banner-item-image"></image>
				<text class="footer-banner-item-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msgs: [{
						title: "中餐",
						houseType: "150-180m²",
						currencyType: "￥",
						price: 9999,
						theContent: "长风破浪会有时，直挂云帆济沧海",
						tSrc: "../../static/images/index/build1.png"
					},
					{
						title: "西餐",
						houseType: "150-180m²",
						currencyType: "￥",
						price: 9999,
						theContent: "请君试问东流水，别意与之谁短长",
						tSrc: "../../static/images/index/build2.png"
					},
					{
						title: "日式",
						houseType: "150-180m²",
						currencyType: "￥",
						price: 9999,
						theContent: "今人不见古时月，今月曾经照古人",
						tSrc: "../../static/images/index/build1.png"
					},
					{
						title: "泰式",
						houseType: "150-180m²",
						currencyType: "￥",
						price: 9999,
						theContent: "相见情已深，未语可知心",
						tSrc: "../../static/images/index/build2.png"
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	* {
		margin: 0 auto;
		padding: 0 0;
	}
	/* 公共banner部分 */
	.item-banner {
		width: 375px;
		height: 28px;
		top: 14px;
		left: 5px;
		position: relative;
	}

	.item-banner-line {
		width: 6rpx;
		height: 28rpx;
		background: #3d9c36;
		position: absolute;
		left: 5%;
	}

	.item-banner-text {
		width: 56px;
		height: 20px;
		font-size: 14px;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: CENTER;
		color: #333333;
		line-height: 14px;
		position: absolute;
		left: 9%;
	}

	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box; //盒子模型
	}
	
	/* 合作品牌 */
	
	.mask-item {
		width: 375px;
		height: 142px;
		background: #ffffff;
	}

	.mask-list-item-image {
		padding-top: 24rpx;
		display: flex;
		flex-direction: row;
		overflow-x: scroll;
	}

	.mask-item-image {
		width: 142px;
		height: 84px;
		padding-left: 20px;
	}

	.mask-item-image image {
		width: 142px;
		height: 84px;
	}
	/* 楼盘套餐 */
	.project-list-items{
		width: 357px;
		transform: translateX(-2%);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.project-list-item{
		width: 158px;
		height: 292px;
		margin: 14px 4px 4px 4px;
		border-radius: 0px 0px 6px 6px;
	}
	.project-list-item-image{
		width: 158px;
		height: 210px;
		border-radius: 0px 0px 6px 6px;
	}
	.project-list-item-box{
		width: 158px;
		height: 81px;
		background: #ffffff;
		border-radius: 0px 0px 6px 6px;
	}
	.project-list-item-title{
		width: 116px;
		color: #333333;
		font-size: 14px;
		font-weight: bold!important;
		transform: translateX(10%);
	}
	.project-list-item-houseType{
		width: 75px;
		color: #666666;
		font-size: 14px;
		transform: translateX(12%);
	}
	.project-list-item-currencyType{
		width: 10px;
		height: 16px!important;
		font-size: 12px!important;
		color: #e54040;
		line-height: 10px!important;
		transform: translateX(250%);
	}
	.project-list-item-price{
		width: 39px;
		height: 22px!important;
		font-size: 18px!important;
		color: #e54040;
		transform: translateX(70%);
		line-height: 16px!important;
	}
	.project-list-item-theContent{
		width: 140px;
		height: 28px!important;
		font-size: 12px!important;
		color: #666666;
		line-height: 10px!important;
		transform: translateX(5%);
	}
	.alignment{
		height: 17px;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		line-height: 12px;
		display: inline-block;
	}
	
	/* 底部导航栏 */
	.footer-banner{
		width: 100vw;
		height: 56px;
		display: flex;
		border-top: 1px solid rgba(0,0,0,0.10);
		overflow: hidden;
	}
	.footer-banner-item{
		width: 25px;
		transform: translateY(5px);
	}
	.footer-banner-item-image{
		width: 23px;
		height: 23px;
		z-index: 1;
	}
	.footer-banner-item-text{
		font-size: 12px;
	}
</style>
